<template>
  <div class="view"  @mouseover="mouseOver" @mouseleave="mouseLeave" @click="click">
    <div class="img-box">
      <img :src="info.url" alt="" :class="{active:isShowComplete}">
    </div>

    <div class="text" v-show="!isShowComplete">{{info.content}}</div>
    <div class="text-move" v-show="isShowComplete">
      <div>{{info.content}}</div>
      <div class="up">UP{{info.up}}</div>
      <div class="up">{{info.num}}万播放</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Item",
    props: {
      info: {}
    },
    methods: {
      mouseOver() {
        this.isShowComplete = true;
      },
      mouseLeave() {
        this.isShowComplete = false;
      },
      click(){
        console.log("777777");
        this.$router.push("/detail")
      }

    },
    data() {
      return {
        isShowComplete: false
      }
    }
  }
</script>

<style scoped>
  .view {
    cursor: pointer;
    position: relative;
    flex: 1 1 30%;
    height: 100px;
  }
  .img-box {
    width: 95%;
    height: 95%;
    background: black
  }

  .img-box img {
    width: 100%;
    height: 100%;
    z-index: 1;
  }


  .text {
    position: absolute;
    bottom: 5px;
    color: white;
    z-index: 2;
    font-weight: 500;
    font-family: "宋体";
    font-size: 18px;
    overflow: hidden;
    width: 100%;
    margin-left: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .text-move {
    position: absolute;
    bottom: 5px;
    color: white;
    z-index: 2;
    font-weight: 700;
    font: 18px "宋体";
    margin-left: 5px;
  }

  .up {
    font: 14px "宋体";
    margin-left: 5px;
  }

  .active {
    opacity: 0.6;
    filter: alpha(opacity=60);
  }
</style>